<#import "/manage/tpl/pageTep.ftl" as page>
<@page.pageBase currentMenu="商品管理">
<div class="xm-product">
    <form id="addForm" class="form-horizontal" method="post" action="">
        <div class="row">
            <div class="panel">
                <div class="panel-header">
                    <strong>新增商品</strong>
                </div>
                <div class="panel-body">
                    <h3 class="offset2">基本信息</h3>
                    <hr>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            商品名称：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span8" name="name" placeholder="请输入商品名称">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            商品类别：
                        </label>

                        <div class="controls">
                            <select data-rules="{required:true}">
                                <option value="">-请选择-</option>
                                <option value="其他">其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            商品单位：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width span8" name="unit" placeholder="请输入商品单位">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            是否新品：
                        </label>

                        <div class="controls">
                            <select data-rules="{required:true}" name="isnew">
                                <option value="">-请选择-</option>
                                <option value="y">是</option>
                                <option value="y">否</option>
                            </select>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            是否特价：
                        </label>

                        <div class="controls">
                            <select data-rules="{required:true}" name="sale">
                                <option value="">-请选择-</option>
                                <option value="y">是</option>
                                <option value="y">否</option>
                            </select>
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            赠送积分：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width " name="score">
                        </div>
                    </div>

                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            商品标题：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width " name="title">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            关键字：
                        </label>

                        <div class="controls">
                            <input type="text" class="control-text span-width " name="keywords">
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label">
                            <s>*</s>
                            页面描述：
                        </label>

                        <div class="controls control-row4">
                            <textarea type="text" class="input-large" name="description"></textarea>
                        </div>
                    </div>
                    <h3 class="offset2">商品图片
                        <button class="button button-primary pull-right" id="imagesBtn">新增</button>
                    </h3>
                    <hr>
                    <div id="imagesGrid" class="xm-grid">

                    </div>
                    <h3 class="offset2">属性参数
                        <button class="button button-primary pull-right" id="attributeBtn">新增</button>
                    </h3>
                    <hr>
                    <div id="attributeGrid" class="xm-grid">

                    </div>
                    <h3 class="offset2">规格库存
                        <button class="button button-primary pull-right" id="specBtn">新增</button>
                    </h3>
                    <hr>
                    <div id="specGrid" class="xm-grid">

                    </div>
                    <h3 class="offset2">绑定赠品
                        <button class="button button-primary pull-right" id="giftBtn">新增</button>
                    </h3>
                    <hr>
                    <div id="giftGrid" class="xm-grid">

                    </div>
                    <div class="centered">
                        <button type="submit" class="button  button-large  button-success">立即保存</button>
                    </div>


                </div>
            </div>
        </div>
        <div class="row">
            <div class="span24">

            </div>
        </div>
    </form>
</div>

<script type="text/javascript">

    var Grid = BUI.Grid,
            Store = BUI.Data.Store;

    var addForm = new BUI.Form.Form({
                srcNode: '#addForm'
            }).render();

    /**
     * 图片信息
     * @type {*[]}
     */
    var imagesColumns = [
        {title: '图片', dataIndex: 'url', width: '30%',renderer:function(data){
            return '<img src="${basepath}/'+data+'" width="100px" height="100px"/>'
        }},
        {title: '状态', dataIndex: 'state', width: '30%',renderer:function(data){
            if(data=="SUCCESS"){
                return "上传成功";
            }
            return "上传失败";
        }},
        {title: '操作', dataIndex:'title',width: '40%',renderer:function(data,obj,index){
            return '<a href="javascript:delImages(' +index+ ')">删除</a>';
        }}
    ];
    var imagesStore = new Store({});
    var imagesGrid = new Grid.Grid({
        render: '#imagesGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: imagesColumns,
        idField: 'title',
        store: imagesStore
    });

    function delImages(index){
        var record = imagesStore.findByIndex(index);
        imagesStore.remove(record);
    }
    /**
     * 属性信息
     * @type {*[]}
     */
    var attributeColumns = [
        {title: '属性名称', dataIndex: 'a', width: '30%'},
        {title: '属性值', dataIndex: 'b', width: '30%'},
        {title: '操作', dataIndex: 'c', width: '40%'}
    ];
    var attributeStore = new Store({});
    var attributeGrid = new Grid.Grid({
        render: '#attributeGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: attributeColumns,
        idField: 'a',
        store: attributeStore
    });
    /**
     * 规格信息
     * @type {*[]}
     */
    var specColumns = [
        {title: '规格名称', dataIndex: 'a', width: '20%'},
        {title: '规格值', dataIndex: 'b', width: '20%'},
        {title: '库存', dataIndex: 'c', width: '20%'},
        {title: '原价', dataIndex: 'c', width: '20%'},
        {title: '现价', dataIndex: 'c', width: '20%'}
    ];
    var specStore = new Store({});
    var specGrid = new Grid.Grid({
        render: '#specGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: specColumns,
        idField: 'a',
        store: specStore
    });
    /**
     * 赠品信息
     * @type {*[]}
     */
    var giftColumns = [
        {title: '赠品名称', dataIndex: 'a', width: '30%'},
        {title: '赠品价格', dataIndex: 'b', width: '30%'},
        {title: '操作', dataIndex: 'c', width: '40%'}
    ];
    var giftStore = new Store({});
    var giftGrid = new Grid.Grid({
        render: '#giftGrid',
        width: '100%',//如果表格使用百分比，这个属性一定要设置
        columns: giftColumns,
        idField: 'a',
        store: giftStore
    });

    imagesGrid.render();
    attributeGrid.render();
    specGrid.render();
    giftGrid.render();
    imagesGrid.on("aftershow", function (e) {
        //万恶的json导致菜单栏高度问题
        $(".dl-second-nav").css("height", $(".dl-inner-tab").css("height"));
    });
    attributeGrid.on("aftershow", function (e) {
        //万恶的json导致菜单栏高度问题
        $(".dl-second-nav").css("height", $(".dl-inner-tab").css("height"));
    });
    specGrid.on("aftershow", function (e) {
        //万恶的json导致菜单栏高度问题
        $(".dl-second-nav").css("height", $(".dl-inner-tab").css("height"));
    });
    giftGrid.on("aftershow", function (e) {
        //万恶的json导致菜单栏高度问题
        $(".dl-second-nav").css("height", $(".dl-inner-tab").css("height"));
    });


    var uploader = WebUploader.create({
        auto: true,
        swf: '${staticpath}/ueditor/third-party/webuploader/Uploader.swf',
        server: '${basepath}/manage/ued/config?action=uploadimage',
        pick: '#imagesBtn',
        resize: false,
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/gif,image/jpg,image/jpeg,image/bmp,image/png,'
        }
    });

    uploader.on( 'uploadSuccess', function(file,response) {
        uploader.removeFile( file );
        imagesStore.add(response);
    });

</script>

</@page.pageBase>